<!--
 * @Description: 开户流程tab切换，ref是为了修复table的问题
 * @Date: 2020-12-09 15:20:11
 * @LastEditors: lother
 * @LastEditTime: 2021-01-08 14:33:48
 * @FilePath: \AccounOpening-WEB\src\views\openProcess\Hopen\index.vue
-->
<template>
  <div>
    <el-tabs
      type="border-card"
      v-model="activeName"
      @tab-click="tabClick"
      v-show="tabShow"
    >
      <el-tab-pane
        v-for="item in tabList"
        :key="item.label"
        :label="item.label"
        :name="item.user_type"
      >
        <continent
          :user_type="item.user_type"
          :label="item.label"
          :ref="'table_' + item.user_type"
          @indexConfig="configList"
        ></continent>
      </el-tab-pane>
    </el-tabs>
    <div v-show="!tabShow">
      <config
        :rowItem="rowItem"
        :user_type="activeName"
        :type="type"
        @indexBack="back"
        ref="configList"
      ></config>
    </div>
  </div>
</template>
<script>
import config from "@/views/openProcess/config";
import continent from "@/views/openProcess/Hopen/continent";
export default {
  components: {
    config,
    continent,
  },
  data() {
    return {
      tabShow: true,
      tabList: [
        {
          label: this.$t('Hopen.index.56cjsemclsw0'),
          user_type: "1",
        },
        {
          label: this.$t('Hopen.index.56cjsemcn3s0'),
          user_type: "2",
        },
        {
          label: this.$t('Hopen.index.56cjsemcne80'),
          user_type: "3",
        },
      ],
      activeName: "1",
      pageItem: {},
      type: "2",
      rowItem: {},
    };
  },
  methods: {
    tabClick(val) {
      this.$refs["table_" + this.activeName][0].init();
    },
    configList(item) {
      console.log(item);
      this.tabShow = !this.tabShow;
      this.type = item.type;
      this.rowItem = item.rowItem || {};
      var id = item.rowItem.id || "";
      this.$refs.configList.init(id, item.type, item.user_type);
    },
    back(val) {
      this.tabShow = !this.tabShow;
      console.log(this.activeName);
      this.$refs["table_" + this.activeName][0].init();
    },
  },
};
</script>